<template>
  <input
    :type="type"
    class="ipt"
    :value="value"
    @input="input"
    :placeholder="placeholder"
    :class="{ success: state == 'success', error: state == 'error' }"
    @blur="blueFn"
  />
</template>

<script>
export default {
  data() {
    return {
      state: "",
    };
  },
  props: {
    value: String,
    placeholder: String,
    type: String,
    rules: RegExp,
    msg: String,
  },
  methods: {
    input(e) {
      this.$emit("input", e.target.value);
      let num = 0;
      /[0-9]/.test(e.target.value) && num++;
      /[a-z]/.test(e.target.value) && num++;
      /[A-Z]/.test(e.target.value) && num++;
      /[~!@#$%^&*()_+=]/.test(e.target.value) && num++;
      e.target.value.length > 9 && num++;
      this.$emit("yanzhengfn", num);
    },
    blueFn(e) {
      const str = e.target.value.trim();
      if (this.rules) {
        if (this.rules.test(str)) {
          console.log("验证通过");
          this.state = "success";
        } else {
          console.log("验证失败", this.msg);
          this.state = "error";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ipt {
  width: 318px;
  height: 48px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: 2px solid #ccc;
  margin: 20px auto;
  display: block;
}
.success {
  border-bottom-color: rgb(34, 214, 88);
  color:rgb(34, 214, 88)
}
.error {
  border-bottom-color: rgb(236, 92, 26);
  color: rgb(236, 92, 26);
}
</style>